<template>
  <div>
    <div class="navbar-wrapper">
      <van-nav-bar title="商品详情" left-text="返回" @click-left="returnFn" />
    </div>
    <!-- 图片 -->
    <van-swipe @change="onChange">
      <van-swipe-item
        v-for="(obj, index) in $route.query.item.swiperImgs"
        :key="index"
        title="默认"
      >
        <img :src="obj" alt="" style="height: 300px; width: 100%" />
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }}/4</div>
      </template>
    </van-swipe>
    <van-cell-group inset>
      <van-cell
        :title="`￥${$route.query.item.price}`"
        style="font-size: 18px; color: firebrick"
      />
      <van-cell :title="$route.query.item.name" style="font-size: 18px" />
    </van-cell-group>
    <van-cell-group inset>
      <van-cell :title="$route.query.item.name" style="font-size: 15px" />
      <van-cell>
        <span>可配送海外</span>
        <span>京东发货&售后</span>
        <span>京准达</span>
        <span>211限时达</span>
      </van-cell>
      <van-cell>
        <span>可自提</span>
        <span>不可使用优惠卷</span>
      </van-cell>
    </van-cell-group>
    <div v-for="(obj, index) in $route.query.item.detailImgs" :key="index">
      <img :src="obj" alt="" style="width: 100%" />
    </div>

    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
      <van-goods-action-icon icon="shop-o" text="店铺" @click="onClickIcon" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="onClickButton"
      />
      <van-goods-action-button type="danger" text="立即购买" @click="payment" />
    </van-goods-action>
  </div>
</template>
<script>
import { Toast } from "vant";

export default {
  data() {
    return {
      current: 0,
      showNavbar: false, // 添加showNavbar变量
      value: 0,
    };
  },
  methods: {
    returnFn() {
      this.$router.push({
        path: "/productList",
        query: {
          listShow: true,
        },
      });
    },
    onChange(index) {
      this.current = index;
    },

    onClickIcon() {
      Toast("点击图标");
    },
    //
    onClickButton() {
      const item = this.$route.query.item; // 获取项目数据
      this.$store.commit("addToCart", item);
      Toast("已添加到购物车");
      this.$router.push({
        path: "/ShopCar",
        query: {
          arrs: this.$route.query.item,
        },
      });
    },

    payment() {
      this.$router.push({
        path: "/buynow",
        query: {
          arr: this.$route.query.item,
        },
      });
    },
  },
  created() {
    document.documentElement.scrollTop = 0;
  },
};
</script>
<style lang="less" scoped>
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}

.swipe-wrapper {
  margin-top: 44px;
}

.show-navbar {
  opacity: 1 !important;
}

.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}

.swipe-wrapper {
  margin-top: 44px;
}
</style>
